<%@ page language="java" import="java.util.*, org.apache.hadoop.fs.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>海康云盘系统</title>

    <link rel="stylesheet" href="css/poposlides.css">
    <link rel="stylesheet" href="css/layout.css">
    <script src="js/jquery-2.1.4.min.js" ></script>
    
    <script>
      
      //给文件列表加鼠标滑过事件,高亮当前行,并把对该文件的操作按钮显示出来
      function initTrEvent(){
      	 	$("#center_table tr").mouseover(
      	 		function(){
					$(this).siblings().removeClass("highlightTd");
					$(this).addClass("highlightTd");
					$(this).find("div").show();  //显示出对该文件的操作按钮,有分享,下载,删除三个按钮
					$(this).siblings().find("div").hide();
			});  
      }

      $(function(){
        	var msg="${msg}";
        	if(msg!=""){
        		alert(msg);
        	}
        	
        	${refreshScript};  //上传或删除文件后,刷新左侧的百分比,这个串是从服务端传过来的,内容是: window.parent.leftFrame.location.reload()

            var v=$(window).height()-$(".datas").offset().top;
            $(".datas").height(v);
           
            initTrEvent();
       });
       
       
       //点击文件夹时,要打开它的子级页面
       function getSubFiles( parent){
       		window.location.href="HdfsServlet?flag=manageSubFiles&parent="+ encodeURI(parent); 
       }
       	
       	
       //上传文件
       function uploadFile(){
       		$("#img1").show();
       		document.form1.submit();
       }
       
       //点了新建文件夹以后,要动态创建一行,里面有输文件夹名的文本框和对应的两个按钮
       function createNewTr(){
       		$("#center_table tr").unbind("mouseover"); 
		    $("#center_table tr").removeClass("highlightTd");
		    
       		$("body tr").attr("disabled","disabled"); 
       	    $(".frame-nav *").attr("disabled","disabled"); 
			 
       		var innerTD =
       		   "<tr>"+
       				"<td><img src='images/fileIcons/folder.png' /> <input id='txtFolderName'  value='请输入文件夹名称'> <button class='newrow-btn' onclick='mkDir()'>✓</button>  <button  class='newrow-btn'  onclick='cancleCreateDir(this)'>X</button> </td><td></td><td></td><td></td>"
       		  +"</tr>";
             $("#center_table").prepend(innerTD);
             
             document.getElementById("txtFolderName").select();  //让文本框内的默认文本被选中
       }
       
       //真正的创建一个文件夹,点是如何取得这个文件夹的父级是谁
       function mkDir(){
       	   var parent=encodeURI($("#parent").val());
       	   var folderName= encodeURI($("#txtFolderName").val());
           window.location.href="HdfsServlet?flag=createFolder&parent="+parent+"&folderName="+folderName;	
       }
       
       //放弃创建文件夹(其实就是将这行移除)   
       function cancleCreateDir(btn){
       	 $(btn).parent().parent().remove();
       	 $("body tr").removeAttr("disabled"); 
       	 $(".frame-nav *").removeAttr("disabled"); 
         initTrEvent();	
       }
       
       //删除hdfs上的文件
       function delFile(fileName){
       		if(confirm('确定要删除吗')==true){
       			 window.location.href=" HdfsServlet?flag=delete&fileName=" +encodeURI(fileName);
       		}   
       }
           
    </script>  
  </head>
      
  <body>
   <form style="display:none" name="form1" action="HdfsServlet?flag=upload" method="post"  enctype="multipart/form-data"  > 
        <input type="text" id="parent"  name="parent"  value='${parent }'  />  <!-- 这句的位置一定要在下句之上, parent代表的是当前在哪个文件夹下 -->
    	<input type="file" name="file1" id="btnFileUp" onchange="uploadFile()" style="display: block" />
   </form>
   
   <div class="frame-center">
            <div class="frame-nav">
                <div class="centerLeft">
                    <a  onclick="document.getElementById('btnFileUp').click();" class="active"><img src="images/upload.png"  />上传</a>
                    <a  onclick="createNewTr()" ><img src="images/createfolder.png"/>新建文件夹</a>
                    <a><img src="images/download.png" />离线下载</a>
                    <a><img src="images/machine.png" />我的设备</a>
                </div>
                <div class="centerRight"> 
                	<form id="form1" action="HdfsServlet?flag=search" method="post">
	                    <p>
	                        <input type="text" name="fileName" placeholder="搜素你的文件" value="${param.fileName }">
	                        <img onclick="$('#form1').submit()"  src="images/search.png"  title="搜索"  />
	                    </p>
	                    <img src="images/menu1.png">
	                    <img src="images/menu2.png">
                     </form>
                </div>
            </div>
                
            <div class="frame-title">
        	   <span>   
	        	    <a href="HdfsServlet?flag=manage"> 全部文件  | </a>
	              	<c:forEach  var="url" items="${urlList }">
	              		<a onclick='getSubFiles("${fn:split(url,"_")[0] }")'>  &gt;  ${fn:split(url,"_")[1]}  </a>
	              	</c:forEach>
              	</span>
              	<span>
            		  已全部加载，共  <label>${fn:length(hdfsFileList)} </label>个
                </span>
                <img id="img1" style="display:none" src="images/processing.gif" />
            </div>
           
            <div class="tab">
                <table>  
                    <tr>
                        <td><input type="checkbox">文件名</td>
                        <td></td>
                        <td>大小</td>
                        <td>修改日期</td>
                    </tr>
                </table>
                
                <div class="datas">
	                <table id="center_table">	
	                	<c:forEach var="fileInfo" items="${hdfsFileList}">
	                	 <tr>
	                	    <td>
	                	       &nbsp; <input type="checkbox"><img src="images/fileIcons/${fileInfo.icon }">
	                	        <label  <c:if test="${fileInfo.f.directory==true }" > onclick="getSubFiles('${fileInfo.path}')" </c:if> > ${fileInfo.name }</label>
	                	     </td>
	                	      <td >
	                	        <div>
	                	        	<a href=""><img src="images/a.png" title="分享"  /></a> 
	                	            <a href="HdfsServlet?flag=download&fileName=${fileInfo.path }"><img src="images/b.png"  title="下载"  /></a>  
	                	            <a onclick="return delFile('${fileInfo.path}')" ><img src="images/c.png"  title="删除"  /></a>
	                	         </div>
	                	      </td>
	                        <td>${fileInfo.len}</td>
	                        <td>${fileInfo.modificationTime}</td>
	                        </tr>
	                	</c:forEach>
	                </table>
                </div>
            </div>
        </div>
  </body>
</html>
